<template>
  <sys-page ref="page" :columns="columns" :model="model" :loader="loader" label-width="90px" @add="onAdd"
            :query-props="{isSimple: false, showAddBtn: $hasPerm('app:user:save')}"
            toolbar
            :table-props="{highlightCurrentRow: true}"
            :table-listeners="{'current-change': onCurrentChange, 'sort-change': onSortChange}"
  >

    <template v-slot:form>
      <el-form-item label="客户名：">
        <el-input v-model="model.username" placeholder="客户名" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input v-model="model.mobile" placeholder="手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="创建人：">
        <el-input v-model="model.createUserName" placeholder="创建人姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker
          v-model="model.time"
          type="daterange"
          range-separator="-"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
    </template>

    <template v-slot:table-actions>
      <el-button-group>
        <el-button type="success" size="small" icon="el-icon-upload2" @click="onUpload">导入客户</el-button>
        <el-button type="primary" size="small" icon="el-icon-tickets" @click="viewBill">查看客户抬头</el-button>
      </el-button-group>
    </template>

    <template v-slot:sex="{row}">
      <tag-sex :value="row.sex"/>
    </template>

    <template v-slot:status="{row}">
      <el-switch :value="row.status"
                 @input="onSwitch(row)"
                 active-text="正常"
                 inactive-text="禁用"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
                 active-value="1"
                 inactive-value="0"></el-switch>
    </template>

    <template v-slot:ctrl="{row}">
      <el-button v-perm:app:user:update type="text" size="small" icon="el-icon-view" @click="onView(row.userId)">查看</el-button>
      <el-button v-perm:app:user:update type="text" size="small" icon="el-icon-edit" @click="onEdit(row.userId)">修改</el-button>
      <el-button v-perm:app:user:delete type="text" size="small" icon="el-icon-remove" class="btn-danger" @click="onDelete(row.userId)">删除</el-button>
    </template>
  </sys-page>
</template>

<script>
import {getSysTuserList, postSysTuserUpdateState} from '$my/code/api/t-user'
import edit from '@/components/modules/app/user/edit'
import detail from '@/components/modules/app/user/detail'
import uploadPanel from '@/components/modules/app/user/upload-panel'

function getColumns() {
  return [
    {type: 'index', label: '序号', align: 'center'},
    {prop: 'username', label: '用户名', align: 'center', sortable: true, minWidth: 100, showOverflowTooltip: true},
    {prop: 'mobile', label: '手机号', align: 'center', minWidth: 150, showOverflowTooltip: true},
    {prop: 'email', label: '邮箱地址', align: 'center', minWidth: 150, showOverflowTooltip: true},
    {prop: 'sex', label: '性别', align: 'center', minWidth: 120, showOverflowTooltip: true},
    {prop: 'status', label: '状态', align: 'center', minWidth: 180, showOverflowTooltip: true},
    {prop: 'createUserName', label: '创建人', align: 'center', sortable: true, minWidth: 150, showOverflowTooltip: true},
    {prop: 'createTime', label: '创建时间', align: 'center', sortable: true, minWidth: 150, showOverflowTooltip: true},
    {prop: 'updateTime', label: '最后更新时间', align: 'center', sortable: true, minWidth: 150, showOverflowTooltip: true},
    {prop: 'ctrl', label: '操作', width: 210, fixed: 'right', align: 'center'}
  ]
}

const ORDER = {
  descending: 'des',
  ascending: 'asc'
}

const COLUMN = {
  createTime: 't1.create_time',
  updateTime: 't1.update_time',
  username: 't1.username',
  createUserName: 't2.username'
}

export default {
  name: 'user',
  data() {
    return {
      model: {
        username: '',
        mobile: '',
        createUserName: '',
        time: []
      },
      sort: {
        prop: 'createTime',
        order: 'descending'
      },
      columns: getColumns(),
      currRow: null
    }
  },
  methods: {
    reload() {
      this.$refs.page.reload()
    },
    async loader(model) {
      const {time, ...others} = model
      const params = {...others}

      if(time.length === 2) {
        params.stime = time[0]
        params.etime = time[1]
      }

      // 排序处理
      if(this.sort) {
        params.sidx = COLUMN[this.sort.prop] || this.sort.prop
        params.order = ORDER[this.sort.order]
      }

      return getSysTuserList(params)
    },
    onAdd() {
      this.$refs.page.setDialog({
        title: '新增客户',
        comp: edit
      })
    },
    onEdit(id) {
      this.$refs.page.setDialog({
        title: '编辑客户',
        comp: edit,
        props: {
          id: id + ''
        }
      })
    },
    onView(id) {
      this.$refs.page.setDialog({
        title: '查看客户',
        comp: detail,
        props: {
          id: id + ''
        }
      })
    },
    onDelete(id) {
      this.$confirm('确定进行[删除]操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        postSysTuserUpdateState({userId: id, deleteflag: 1}).then(res => {
            this.$notify.success('操作成功!')
            this.reload()
          })
        // postSysTuserDelete(userIds).then(res => {
        //   this.$message.success('操作成功!')
        //   this.$refs.page.reload()
        // })
      })
    },
    onSwitch(row) {
      const mapper = {
        0: '1',
        1: '0'
      }
      let {status, userId} = row
      status = mapper[status]
      postSysTuserUpdateState({status, userId}).then(res => {
        if (res) {
          this.$notify.success('操作成功!')
          this.reload()
        }
      })
    },
    onCurrentChange(row) {
      // 行选中
      this.currRow = row
    },
    onSortChange({ column, prop, order }) {
      this.sort = {prop, order}
      this.reload()
    },
    viewBill() {
      if(!this.currRow) {
        this.$notify.warning('请先选中一行')
      }
    },
    onUpload() {
      this.$refs.page.setDialog({
        title: '导入客户',
        comp: uploadPanel,
        width: '80%',
        props: {}
      })
    }
  },
  mounted() {
    this.$store.dispatch('loadDictionary', 'constant/sex')
  }
}
</script>

<style lang="scss" scoped>
.user {
}
</style>

